<template>
  <div class="learn_time">
      <div>
          <a-tabs default-active-key="1" @change="callback">
            <a-tab-pane key="1" tab="日">
                <div class="timer_pick" style="display:flex;justify-content: space-between">
                    <a-date-picker value-format="yyyy-MM-DD" v-model="date1" @change="chooseday" style="margin-left:15px"/>  
                    <span style="font-size:15px;margin-right:10px"><a-icon type="pie-chart" style="color: #028D4A;margin-right:5px"/>{{date1}}总学时：{{alldaytime}}</span>
                </div>
                <div id="daychart" :style="{width: '100%', height: '40vh'}"></div>
            </a-tab-pane>
            <a-tab-pane key="2" tab="月" force-render>
                <div class="timer_pick" style="display:flex;justify-content: space-between">
                    <a-month-picker value-format="yyyy-MM" v-model="date2" @change="choosemonth" placeholder="Select month" style="margin-left:15px"/>  
                    <span style="font-size:15px;margin-right:10px"><a-icon type="pie-chart" style="color: #028D4A;margin-right:5px"/>{{date2}}总学时：{{allmonthtime}}</span>
                </div>
                <div id="weekchart" :style="{width: '100%', height: '40vh'}"></div>
            </a-tab-pane>
            <a-tab-pane key="3" tab="年" force-render>
                <div class="yearpiker" style="display:flex;justify-content: space-between">
                    <a-input-number v-model="year" @change="chooseyear" :min="1" :max="10000"  style="width:160px" placeholder="填写年份"/>
                    <span style="font-size:15px;margin-right:10px"><a-icon type="pie-chart" style="color: #028D4A;margin-right:5px"/>{{year}}年总学时：{{allyeartime}}</span>
                </div>
                <div id="yearchart" :style="{width: '100%', height: '40vh'}"></div>
            </a-tab-pane>
           </a-tabs>
           <div class="dadaaa" style="display:flex;justify-content: space-between">
                <img src="../../assets/img/center_threee.png" class="width:20%;height:10vh" alt=""> 
                <span style="font-size:16px;margin-right:20px;margin-top:30px">已获取积分：<span style="color:#028D4A">{{myranknum}}分</span></span>
            </div>
      </div>
  </div>
</template>

<script>
import {getdaylearnData,getmonthlearnData,getyearlearnData} from '../../api/usercenter'
export default {
    props:['myranknum'],
    data() {
        return {
            year:'',
            date1:'',
            date2:'',
            alldaytime:0,
            allmonthtime:0,
            daylist:{},
            daydetail:[],
            daydetaildata:[],
            allyeartime:0,
            yeardetail:[]
        }
    },
    mounted(){
        
    },
    created(){
        this.getdaychartData()
        this.getmonthchartData()
        this.getyearchartData()
    },
    methods: {
        callback(key) {
        },
        chooseday(val){
            this.date1 = val
            let date = this.date1
            this.getdaychartData(date)
        },
        getdaychartData(date){
            if(this.date1==''){
                let adate = new Date()
                let bdate = {
                            year: adate.getFullYear(),
                            month: adate.getMonth() + 1,
                            date: adate.getDate(),
                        }
                this.date1 = bdate.year + '-' + 0 + bdate.month + '-'  + bdate.date;
            }
            getdaylearnData(date).then(res=>{
                let aa = 0
                Object.keys(res).forEach(function(key){
                    if(res[key]==null){
                        res[key]=0
                    }
                    aa+=Number(res[key])
                    return aa
                })
                this.daylist = res
                this.alldaytime = aa.toFixed(3)
                this.$store.commit('setnumbre',this.alldaytime)
                this.drawLine()
            })
        },
        choosemonth(val){
            this.date2 = val
            let date = this.date2
            this.getmonthchartData(date)
        },
        getmonthchartData(date){
            if(this.date2==''){
                let adate = new Date()
                let bdate = {
                            year: adate.getFullYear(),
                            month: adate.getMonth() + 1,
                        }
                this.date2 = bdate.year + '-' + 0 + bdate.month;
            }
            getmonthlearnData(date).then(res=>{
                let aa = 0
                let bb = []
                let cc = []
                Object.keys(res).forEach(function(key){
                    if(res[key]==null){
                        res[key]=0
                    }
                    bb.push(key)
                    cc.push(res[key])
                    aa+=Number(res[key])
                    return aa
                })
                this.allmonthtime = aa.toFixed(3)
                this.daydetail = bb
                this.daydetaildata = cc
                this.drawLine()
            })
        },
        chooseyear(val){
            this.year = val
            let date = this.year
            this.getyearchartData(date)
        },
        getyearchartData(date){
            if(this.year==''){
                let adate = new Date()
                let bdate = {
                            year: adate.getFullYear(),
                        }
                this.year = bdate.year;
            }
            getyearlearnData(date).then(res=>{
                let aa = 0
                let bb = []
                Object.keys(res).forEach(function(key){
                    if(res[key]==null){
                        res[key]=0
                    }
                    bb.push(res[key])
                    aa+=Number(res[key])
                })
                this.allyeartime = aa.toFixed(3)
                this.yeardetail = bb
                this.$store.commit('setnumbre',this.allyeartime)
                this.drawLine()
            })
        },
        drawLine(){
            // 基于准备好的dom，初始化echarts实例
            let daychart = this.$echarts.init(document.getElementById('daychart'))
            // 绘制图表
            daychart.setOption({
                tooltip : {
                        trigger: 'axis'
                    },
                    // legend: {
                        
                    // },
                    color:'#028F4A',
                    xAxis : [
                        {   
                            type : 'category',
                            data : ['00:00','02:00','04:00','06:00','08:00','10:00','12:00','14:00','16:00','18:00','20:00','22:00',]
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'小时',
                            type:'bar',
                            data:[this.daylist.time_0,this.daylist.time_2,this.daylist.time_4,this.daylist.time_6,this.daylist.time_8,this.daylist.time_10,this.daylist.time_12,this.daylist.time_14,this.daylist.time_16,this.daylist.time_18,this.daylist.time_20,this.daylist.time_22],
                            markPoint : {
                                data : [
                                    {type : 'max', name: '最大值'},
                                    {type : 'min', name: '最小值'}
                                ]
                            },
                            itemStyle: {        //上方显示数值
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'top', //在上方显示
                                        textStyle: { //数值样式
                                            color: '#028F4A',
                                            fontSize: 16
                                        }
                                    }
                                }
                            }
                        },
                    ]

            });

            let weekchart = this.$echarts.init(document.getElementById('weekchart'))
            // 绘制图表
            weekchart.setOption({
                tooltip : {
                        trigger: 'axis'
                    },
                    // legend: {
                        
                    // },
                    color:'#5685CC',
                    xAxis : [
                        {   
                            type : 'category',
                            data : this.daydetail,
                            
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'小时',
                            type:'bar',
                            data:this.daydetaildata,
                            markPoint : {
                                data : [
                                    {type : 'max', name: '最大值'},
                                    {type : 'min', name: '最小值'}
                                ]
                            },
                            itemStyle: {        //上方显示数值
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'top', //在上方显示
                                        textStyle: { //数值样式
                                            color: '#5685CC',
                                            fontSize: 10
                                        }
                                    }
                                }
                            }
                        },
                    ]

            });

            let yearchart = this.$echarts.init(document.getElementById('yearchart'))
            // 绘制图表
            yearchart.setOption({
                title: {
						text: ''
					},
					tooltip : {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985'
							}
						}
                    },
                    color:'#2BB3D5',
					// legend: {
					// 	data:[]
					// },
					// grid: {
					// 	left: '3%',
					// 	right: '4%',
					// 	bottom: '3%',
					// 	containLabel: true
					// },
					xAxis : [
						{
							type : 'category',
							boundaryGap : false,
							data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
						}
					],
					yAxis : [
						{
							type : 'value'
						}
					],
					series : [
						{
							name:'小时',
							type:'line',
							stack: '总量',
							areaStyle: {normal: {}},
                            data:this.yeardetail,
                            itemStyle: {        //上方显示数值
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'top', //在上方显示
                                        textStyle: { //数值样式
                                            color: '#2BB3D5',
                                            fontSize: 16
                                        }
                                    }
                                }
                            }
                        },
					]
            });
            
        }
    },
    
}
</script>

<style lang='less'>

</style>